// 基于axios封装网络请求
import theAxios from 'axios'
import router from '@/router'
// import { Notify } from 'vant'
import { getToken, removeToken } from './token' // setToken
// import { getNewToken } from '@/api'

const axios = theAxios.create({
  baseURL: 'http://geek.itheima.net',
  timeout: 20000 // 20秒超时事件（请求20秒无响应直接判定超时）
})

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 在发送请求前统一携带token
  // console.log(config)
  // 判断本地是否有token，判断具体api/index.js里如果没有携带Authorization，我再添加上去
  // .? 可选链操作符，如果前面的对象没有length，整个表达式返回undefined
  if (getToken()?.length > 0 && config.headers.Authorization === undefined) {
    config.headers.Authorization = `Bearer ${getToken()}`
  }
  return config
}, function (error) {
  // 对请求错误做些什么

  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response
}, async function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  // http响应状态码 4xx 5xx 报错会进入这里
  // 401时是用户身份过期。需要跳转登录
  console.dir(error)
  if (error.response.status === 401) {
    // 不能使用this.$router 因为这个组件不归vue管理。
    // 解决：this.$router是为了拿到router对象使用。所以要引入router文件中的router对象
    removeToken() // 先清除token，才能使前置路由守卫失效，放行我去登录页
    // 方式1：强制跳转到login登录页，用户有感知
    // router.currentRoute 相当于 在vue文件内 this.$route -> 当前路由的信息
    // fullPath 路由对象里完整路由路径#后的一切
    router.replace(`/login?path=${router.currentRoute.fullPath}`)
  }
  //   // 方式2：通过refresh_token换回新的token，再继续使用，js代码实现，用户无感知（效果好）
  //   const res = await getNewToken()
  //   console.log('新token', res)
  //   // 新的token回来，要做什么
  //   // 1.把本地的token换回新的token
  //   setToken(res.data.data.token)
  //   // 2.更新新的token在请求头里
  //   error.config.headers.Authorization = `Bearer ${res.data.data.token}`
  //   // 3.未完成这次请求，再发起一次
  //   // error.config就是上一次的配置对象
  //   // 结果我们要return回原本逻辑页面调用的地方-还是return回去一个promise对象
  //   // 意思是更新完请求头里的token，再通过axios发起一次更改完后token的请求，把上一次token过期的请求完成。再走一次拦截器逻辑。这时token是对的，没有过期401
  //   return axios(error.config)
  // } else if (error.response.status === 500 && error.config.url === '/v1_0/authorizations' && error.config.method === 'put') {
  //   // 当refresh_token也过期了，跳转登录页重新登录
  //   Notify({ type: 'warning', message: '身份过期' })
  //   localStorage.clear() // 把本地存储删除
  //   router.replace('/login')
  // }
  return Promise.reject(error)
})

export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
  return axios({
    url,
    method,
    params,
    data,
    headers
  })

  // return new Promise((resolve, reject) => {
  // 判断如果params有值，需要自己写js代码，把params对象里key和value拼接到url上
  // $.ajax({
  // url,
  // data,
  // headers,
  // type: method,
  // success: (res) => {
  // resolve(res)
  // },
  // error: err => {
  // reject(err)
  // }
  // })
  // })
}

// 但是上面有局限性 导出axios方法在使用时
/*
// 我在逻辑页面调用时，传入的这五个配置名字，
  axios({
    url:'请求地址',
    method:'请求方式',
    params:{},
    data:{},
    headers:{}
  })
*/
// 把axios换成jquery的$.ajax 参数不匹配
